<!--
@File    : 06_事件处理3.html
@Time    : 2019/6/4 18:07
@Author  : wangshunqing
@Email   : wangshunqing@yihuacomputer.com
@Software: WebStorm
-->
<!--
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 使用事件捕获模式
.self 只在当前元素本身触发
.once 只触发一次
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态组件</title>
    <script src="lib/vue@2.6.10.js"></script>
    <script src="./lib/vuex@3.1.1.js"></script>
    <script src="./lib/vue-router@3.0.6.js"></script>
</head>

<body>
    <div id="app">
            <keep-alive>
                <movie v-if="index===0"></movie>
                <now-playing v-else-if="index===1"></now-playing>
                <pre-sale v-else></pre-sale>  
            </keep-alive>
        <button @click="change">猫眼影院</button>
           
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        components:{
            movie:{template:`<div>我是预售电影</div>`},
            nowPlaying:{template:`<div>我是正在热播</div>`},
            preSale:{template:`<div>我是预售电影</div>`}
        },
        data: {
            index:0
        },
        methods:{
            change(){
                //console.log(this.$options.components);
                let len = Object.keys(this.$options.components).length;
                this.index = (++this.index)%len;
            }
        },
        mounted() {
            console.log("mounted() ");
        },
        activated() {
            //需要配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法
            console.log("哈哈，mounted() 想不到吧， 我是取的缓存")
        },
        deactivated () {
            // 需要配合动态组件keep-live属性使用。在动态组件初始化移出的过程中调用该方法
            console.log("我先隐藏了，下次再从缓存中取出从activated开始哦")
        },
    })
</script>
</html>